閱讀提醒：本文會以解析高級賽車模板功能來介紹 Widget Blueprint（UI 藍圖）。

Unreal Engine：5.03 高級賽車模板

OS：Windows10

本文大綱

1. 新增 Widget Blueprint 
2. UI 事件撰寫－Widget Blueprint

Day17 啦～

今天來看 UI 該怎麼做吧！

在 UE5 模板中，我們有看到一個簡易的 UI ，也就是簡易的儀表板，有時速及檔位表。

那我們就先來看如何新增 UI 的 Widget Blueprint 吧！

新增 Widget Blueprint

• 首先在 Content Drawer 空白處，點擊滑鼠右鍵，選擇 User Interface，新增 Widget Blueprint。
  

• 點擊兩下開啟藍圖，打開會顯示 UMG 編輯器，預設會顯示 Designer 的視窗，UI 視覺圖可以在這設定。
  

• Widget Blueprint 可以分成 7 個部份，按照順序如下

1. 頂部工具列。
2. Palette、Library：各個 UI 類型的物件都會放在這邊，選到自己需要的，例如 Button，並拖曳到 Designer 面板上即可。
3. Hierarchy、BindWidgets：面板上有新增的 UI 物件，都會顯示在這邊。
4. Designer Viewport：就是 UI 設計面板啦～
5. Designer > Graph：切換面板的地方，設置好需要的 UI 物件及位置後，可以點擊 Graph，切換成 Event Graph 事件圖表面板。
6. Detail：屬性/細節面板。
7. 底部工具列。
   

• 從模板中，可以看到這邊設置了幾個 Box 來定位儀表板的位置，還有四個 Text。
  

接下來我們就切到 Event Graph，讓 UI 可以動態的顯示在畫面中吧！

UI 事件撰寫－Widget Blueprint

模板中，除了會變動的 Text 之外，額外新增一個 bool 變數，名為 blsMPH。

Event Pre Construct 事件

• Event Pre Construct 事件，可以將 UI 即時的顯示在畫面中，這段主要是設定單位，並且使用 blsMPH 來儲存 MPH 的值。
• 每個 Widget Blueprint 只能有一個 Event Pre Construct 事件。
  

UpdateSpeed

• 這段邏輯主要是接收到的速度 Input 做絕對值後，跟 MPH 相乘，回傳 Double 型態的值，並在儀表板上顯示目前車輛的時速。
  

UpdateGear

• 這邊又看到熟悉的 Switch 啦，顧名思義，這裡就是接收到車輛目前狀態，不斷更新目前的所在的檔位，從圖中可以看到除了基本的 Set Text，用來顯示行駛中的檔位外，還有兩個 Set Text，分別用來顯示 N、R。
  

小結：基本的 UI 就到這邊啦～這邊設定完之後，還需要將其加入到遊戲或關卡中，明天來看看怎麼將 UI 加到 Player Controller 中吧！

大家可能有發現今天我怎麼沒有一步一步解釋程式邏輯，主要是我覺得大部份的事件、函數等等，前面都有解釋過了，若一步一步寫除了有點沒必要之外，感覺也有點混亂，所以我之後除了沒介紹過或是比較難的事件、函數外，基本都會像今天這樣只解釋整段的程式邏輯，若比較難理解或是沒介紹過的部份，我還是會一步一步寫。

鐵人賽都過半啦～各位挑戰者繼續加油！　(ง๑ •̀_•́)ง